<!--
 * @Author: 胡伟 3247249228@qq.com
 * @Date: 2022-07-08 15:18:48
 * @LastEditors: 胡伟 3247249228@qq.com
 * @LastEditTime: 2022-07-22 16:47:04
 * @FilePath: \first-project\project\src\views\Carousel\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="list">
      <div class="item" v-for="item in list" :key="item.id">
        <img :src="item.lb_img" alt="" />
        <el-button @click="showDialog(item.id)" style="display: block; margin: 10px auto 0" type="primary">更 换 图 片</el-button>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <el-upload class="upload-demo" action="https://jk.huwei6.com/api/tengxun/upload2" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" list-type="picture" :on-success="successUpload">
        <el-button size="small" type="primary">点击上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'FirstProjectCarousel',
  data() {
    return {
      dialogVisible: false,
      list: [],
      fileList: [],
      imgUrl: '',
      id: ''
    }
  },
  methods: {
    async getCarouselList() {
      const { data: res } = await this.$http.get('/carousel')
      this.list = res.data
    },
    showDialog(id) {
      this.id = id
      this.dialogVisible = true
    },
    async submit() {
      this.dialogVisible = false
      const { data: res } = await this.$http.post('/carousel/edit', { id: this.id, lb_img: this.imgUrl })
      if (res.code !== 0) {
        return this.$message.error('更改图片失败')
      }
      this.$message.success('更改图片成功')
      this.getCarouselList()
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
    },
    handlePreview(file) {
      console.log(file)
    },
    successUpload(response, file, fileList) {
      console.log('上传成功了', response, file, fileList)
      console.log('URL', response)

      this.$message({
        message: '恭喜你，图片上传成功',
        type: 'success'
      })
      let imgurl = response.imageUrl
      this.imgUrl = imgurl
      console.log(imgurl)
    }
  },
  created() {
    this.getCarouselList()
  }
}
</script>
<style lang="scss" scoped>
.list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 30px;
  width: 1200px;
  margin: 0 auto;
}

.item {
  margin: 30px 0;
}

.item img {
  width: 500px;
  min-width: 500px;
  height: 200px;
  border-radius: 10px;
  object-fit: cover;
}
</style>
